import React, { useEffect, useState} from 'react'
import { NavLink } from 'react-router-dom'

export default function FnTitle() {
    const [count, setCount] = useState(0)
    const [food, setFood] = useState('rice')
    // componentDidMount + componentDidUpdate / componentWillUnmont
    // useEffect是一个函数，有两个参数。
    // 第一个参数是回调函数，会在某时刻执行，就是上面的那几个时刻
    // 第二个参数是一个可选参数，类型是数组，值是依赖项
    // 第二个参数的3种情况
    // 1. 省略不写时，就是 componentDidMount + componentDidUpdate
    // 2. 空数组时 就是componentDidMount
    // 3. 数组中有数据时,componentDidMount + 这个数据变化时才会执行
    useEffect(() => {
        console.log(111);
        document.title = `点击的次数：${count}`
        return ()=>{
            console.log('我要销毁了。。。');
        }
    }, [count, food])
    return (
        <div>
            <p>按钮上显示点击该按钮的次数，页面标题也显示这个信息-fn</p>
            <button onClick={() => setCount(count + 1)}>{count}</button>
            <button onClick={() => setFood('hotpot')}>{food}</button>
            <NavLink to="/classtitle">classtitle</NavLink>
        </div>
    )
}
